<template>
  <Drawer>
    <BaseForm />
  </Drawer>
</template>
<script lang="tsx" setup>
import { useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { useVbenForm } from '#/adapter/form';
import { getOauthProviderById } from '#/api/sys/oauthProvider';

// 定义表单
const [BaseForm, baseFormApi] = useVbenForm({
  showDefaultActions: false, // 不显示操作按钮
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  fieldMappingTime: [['rangePicker', ['startTime', 'endTime'], 'YYYY-MM-DD']],
  // 提交函数
  handleSubmit: onSubmit,
  layout: 'vertical',
  schema: [
    {
      component: 'Input',
      fieldName: 'name',
      label: $t('sys.oauth.name'),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        clearable: true,
      },
      fieldName: 'clientId',
      label: $t('sys.oauth.clientId'),
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'clientSecret',
      label: $t('sys.oauth.clientSecret'),
      rules: 'required',
    },
    {
      component: 'Input',
      // 对应组件的参数
      fieldName: 'redirectUrl',
      label: $t('sys.oauth.redirectURL'),
      rules: 'required',
    },
    {
      component: 'Input',
      // 对应组件的参数
      fieldName: 'scopes',
      label: $t('sys.oauth.scope'),
      rules: 'required',
    },
    {
      component: 'Input',
      // 对应组件的参数
      fieldName: 'authUrl',
      label: $t('sys.oauth.authURL'),
      rules: 'required',
    },
    {
      component: 'Input',
      // 对应组件的参数
      fieldName: 'tokenUrl',
      label: $t('sys.oauth.tokenURL'),
      rules: 'required',
    },
    {
      component: 'Input',
      // 对应组件的参数
      fieldName: 'infoUrl',
      label: $t('sys.oauth.infoURL'),
      rules: 'required',
    },
    {
      component: 'Input',
      // 对应组件的参数
      fieldName: 'authStyle',
      label: $t('sys.oauth.authStyle'),
      rules: 'required',
    },
  ],
  // 大屏一行显示1个，中屏一行显示1个，小屏一行显示1个
  wrapperClass: 'grid-cols-1',
});

// 定义弹窗
const [Drawer, drawerApi] = useVbenDrawer({
  loading: true, // 不显示加载中状态
  /* 确认按钮点击事件 */
  async onConfirm() {
    /* 提交表单并校验 */
    await baseFormApi.validateAndSubmitForm();
  },
  /* 弹窗打开时触发*/
  async onOpenChange(isOpen: boolean) {
    if (isOpen) {
      // 设置默认值
      const { type, id } = drawerApi.getData<Record<string, any>>();
      // 新增打开弹窗时重置表单
      if (type === 'addData') {
        drawerApi.setState({ loading: false });
        baseFormApi.resetForm();
      }
      // 编辑打开弹窗时回显数据
      if (type === 'editData') {
        try {
          await getOauthProviderById(id).then((res: any) => {
            baseFormApi.setValues({
              ...res,
              description: $t(`sys.${res.description}`),
            });
            // 关闭加载中状态
            drawerApi.setState({ loading: false });
          });
        } catch {
          ElMessage.error('获取详情失败');
          // 关闭加载中状态
          drawerApi.setState({ loading: false });
        }
      }
    }
  },
});

/**
 * 提交表单事件
 * @param values 表单值
 * @author Buke
 */
function onSubmit() {
  // console.log('提交表单', formData);
}
</script>
